<template>
    <div>

        <el-dialog :title="isAdd ? '添加菜单' : '修改菜单'" :visible.sync="isShow" center :before-close="cancel">
            <el-form :model="menuForm" :rules="rules" ref="menuRef">
                <el-form-item label="菜单名称" :label-width="formLabelWidth" prop="title">
                    <el-input autocomplete="off" v-model="menuForm.title"></el-input>
                </el-form-item>
                <el-form-item label="上级菜单" :label-width="formLabelWidth" prop="pid">
                    <el-select v-model="menuForm.pid" placeholder="请选择" @change="changePid">
                        <el-option label="顶级菜单" :value="0"></el-option>
                        <!-- 弹框的上级菜单下拉转化成动态数据 -->
                        <el-option v-for="item in $store.getters['menu/getMenuList']" :key="item.id" :label="item.title"
                            :value="item.id">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="菜单类型" :label-width="formLabelWidth" prop="type">
                    <el-radio v-model="menuForm.type" disabled :label="1">目录</el-radio>
                    <el-radio v-model="menuForm.type" disabled :label="2">菜单</el-radio>
                </el-form-item>
                <!-- 根据菜单类型取决于显示哪个结构  如果是目录1 展示icon  如果是菜单2展示地址 -->
                <el-form-item v-if="menuForm.type == 1" label="菜单图标" :label-width="formLabelWidth" prop="icon">
                    <el-select v-model="menuForm.icon" placeholder="请选择">
                        <el-option v-for="item in iconList" :key="item" :value="item">
                            <i :class="item"></i>
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item v-else label="菜单地址" :label-width="formLabelWidth" prop="url">
                    <el-select v-model="menuForm.url" placeholder="请选择">
                        <el-option v-for="item in IndexRouter" :key="item.path" :value="item.path" :label="item.title">
                        </el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth" prop="status">
                    <el-switch v-model="menuForm.status" :active-value="1" :inactive-value="2" active-color="#13ce66"
                        inactive-color="#ff4949">
                    </el-switch>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="cancel">取 消</el-button>
                <el-button type="primary" @click="add">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import { IndexRouter } from '@/router';
import { menuAdd, menuInfo, menuEdit } from '../../request/api';
export default {
    props: ['isShow', 'isAdd'],//接收父组件传递过来的参数
    data() {
        return {
            formLabelWidth: '120px',
            rules: {
                title: [
                    { required: true, message: '请输入菜单标题', trigger: 'blur' },
                    { min: 2, max: 8, message: '长度在 2 到 8 个字符', trigger: 'blur' }
                ],
                pid: [
                    { required: true, message: '请选择上级菜单', trigger: 'change' }
                ],
            },
            menuForm: {//menu表单
                pid: 0,//上级分类编号  注意：顶级菜单- 0number
                title: '',//菜单名称string
                icon: '',//图标string
                type: 1,//类型 1目录2菜单number
                url: '',//菜单地址string
                status: 1,//状态   1正常2禁用   number类型number
            },
            iconList: ['el-icon-s-tools', 'el-icon-setting', 'el-icon-s-goods', 'el-icon-goods'],
            IndexRouter: IndexRouter
        }
    },
    methods: {
        // 点击取消  关闭弹窗
        cancel() {
            // 子父传值
            this.$emit('cancel', false);
            // 调用封装的置空弹窗
            this.reset();
            this.resetForm()
        },
        // 将弹窗内容置空
        reset() {
            this.menuForm = {//menu表单
                pid: 0,//上级分类编号  注意：顶级菜单- 0number
                title: '',//菜单名称string
                icon: '',//图标string
                type: 1,//类型 1目录2菜单number
                url: '',//菜单地址string
                status: 1,//状态   1正常2禁用   number类型number
            }
        },
        // resetFields	对整个表单进行重置，将所有字段值重置为初始值并移除校验结果
        resetForm() {
            this.$refs.menuRef.resetFields()
        },
        // 获取单条数据
        menuinfo(id) {
            console.log(id, '编辑');
            // 获取单条数据
            menuInfo({ id }).then(res => {
                // console.log(res);
                // 将获取到的信息  重新赋值给表单  数据回显
                this.menuForm = res.list;
                // 将id添加到表单
                this.menuForm.id = id;

            })
        },
        // 点击确定  关闭弹窗
        add() {
            // 子父传值
            this.$emit('cancel', false);
            console.log(this.menuForm);

            // 获取表单内容
            this.$refs.menuRef.validate(value => {
                if (value) {
                    if (this.isAdd) {
                        // 添加表单 调用添加接口
                        menuAdd(this.menuForm).then(res => {
                            if (res.code == 200) {
                                // 关闭弹窗
                                this.cancel();
                                // 调用菜单列表接口 并进行重新渲染
                                this.$store.dispatch('menu/getMenuList');
                                // 成功后的提示信息
                                this.$message.success(res.msg);
                            } else {
                                // 失败后的提示信息
                                this.$message.error(res.msg);
                            }
                        })
                    } else {
                        // 修改表单 调用修改接口
                        menuEdit(this.menuForm).then(res => {
                            console.log(res);
                            if (res.code == 200) {
                                // 修改成功
                                this.$message.success(res.msg);
                                // 重新渲染视图
                                // 调用菜单列表接口 并进行重新渲染
                                this.$store.dispatch('menu/getMenuList');
                            } else {
                                // 修改失败
                                this.$message.error(res.msg);
                            }
                        })
                    }

                }
            })

        },
        // 更改pid
        changePid(id) {
            // 根据选择的pid决定类型显示是目录还是菜单  pid=0顶级目录  pid!=0菜单
            this.menuForm.type = this.menuForm.pid == 0 ? 1 : 2

        }
    },
    mounted() {
    },
    watch: {},
    computed: {},
    filters: {},
    components: {},
}
</script>
<style scoped></style>